<template>
  <!-- 
  在vue2中，一个组件的生命周期分成4个阶段：
    1）创建  beforeCreate  created 
    2）挂载  beforeMount   mounted
    3）更新  beforeUpdate  updated
    4）卸载  beforeDestroy  destoryed
    以上的钩子函数都是选项api

  在vue3中，有一些变化：
    1） beforeCreate  created   由setup替代了
    2） beforeDestroy  destoryed  名字变成了  beforeUnmount  unmouted
    3）新增了两了钩子函数：renderTracked、renderTriggered
    4）vue3中的生命周期函数都是组合式api，前缀都添加了on

 -->
  <h1 v-text="num"></h1>
  <button @click="num++">自增</button>
</template>

<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
  onErrorCaptured,
} from "vue";

const num = ref(100);
console.log("--setup");

// 挂载阶段
onBeforeMount(() => console.log("--开始挂载"));
onRenderTracked(() => console.log("--跟踪"));
onMounted(() => console.log("--挂载完成"));

// 更新阶段
onRenderTriggered(() => console.log("--触发"));
onBeforeUpdate(() => console.log("--开始更新"));
onUpdated(() => console.log("--更新完成"));

// 销毁阶段
onBeforeUnmount(() => console.log("--开始销毁"));
onUnmounted(() => console.log("--销毁完成"));

// 与动态组件相关的
onActivated(() => console.log("--激活"));
onDeactivated(() => console.log("--休眠"));

// 异常捕获
onErrorCaptured(() => console.log("--异常捕获"));
</script>

